<template>
	<div class="content" style="margin: 30px;">
		<el-button plain class="el-icon-circle-plus-outline" @click="ShowAddForm=true,addFrom.level=1"> 新增根原因</el-button>
		<el-button plain class="el-icon-circle-plus-outline" @click="ShowAddFormE=true,addFrom.level=2"> 新增二级原因</el-button>
		<el-button plain class="el-icon-circle-plus-outline" @click="ShowAddFormZ=true,addFrom.level=3"> 新增三级原因</el-button>
    <el-button type="danger" icon="el-icon-delete" @click="delAddForm=true">删除主原因</el-button>
		<div class="span_tit"><span>收入原因</span>Ex. 账户账目变更的收入原因。</div>
      <el-tabs tab-position="left" style="height: 100%; margin: 20px;">
          <el-tab-pane  v-for="itme in tableData.filter(data1 => data1.rtype=='收入')" v-if="itme.parent=='-1'" :label="itme.rname">
            <el-table  :data="itme.paramst" row-key="rid" :tree-props="{children: 'paramst'}" style="width: 100%">
              <el-table-column align="center" label="项目名称" prop="rname">
              </el-table-column>
              <el-table-column align="center" label="项目代码" prop="rcode">
              </el-table-column>
              <el-table-column align="center" label="项目类型" prop="rtype">
              </el-table-column>
              <el-table-column align="center"  label="创建时间" prop="createtime">
              </el-table-column>
              <el-table-column  width="400" label="功能操作" fit align="left">
                <template slot-scope="scope">
                  <div v-if="scope.row.ofCompany!=0">
                    <el-button type="success" size="mini" @click="showEditPop(scope.row)">修改</el-button>
                    <el-button size="mini" type="danger" @click="del(scope.row.rid)">删除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

      </el-tabs>


		<div class="span_tit"><span>支出原因</span>Ex. 账户账目变更的支出原因。</div>
    <el-tabs tab-position="left" style="height: 100%; margin: 5px;">
      <el-tab-pane  v-for="itme in tableData.filter(data1 => data1.rtype=='支出')" v-if="itme.parent=='-1'" :label="itme.rname">
        <el-table  :data="itme.paramst" style="width: 100%" row-key="rid" :tree-props="{children: 'paramst'}">
          <el-table-column align="center" label="项目名称" prop="rname">
          </el-table-column>
          <el-table-column align="center" label="项目代码" prop="rcode">
          </el-table-column>
          <el-table-column align="center" label="项目类型" prop="rtype">
          </el-table-column>
          <el-table-column align="center"  label="创建时间" prop="createtime">
          </el-table-column>
          <el-table-column  width="400" label="功能操作" fit align="left">
            <template slot-scope="scope">
              <div v-if="scope.row.ofCompany!=0">
                <el-button type="success" size="mini" @click="showEditPop(scope.row)">修改</el-button>
                <el-button size="mini" type="danger" @click="del(scope.row.rid)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

    </el-tabs>

		<!-- 新增弹出层 -->
		<el-dialog title="添加根原因" :visible.sync="ShowAddForm" width="600px">
			<el-form :model="addFrom" label-width="80px">
				<el-form-item label="项目名称" :label-width="formLabelWidth" >
					<el-input v-model="addFrom.rname" autocomplete="off" placeholder="请输入原因"></el-input>
				</el-form-item>
				<el-form-item label="项目编号" :label-width="formLabelWidth">
					<el-input v-model="addFrom.rcode" autocomplete="off" placeholder="请输入项目编号"></el-input>
				</el-form-item>

				<el-form-item label="项目类型" :label-width="formLabelWidth">
					<el-select v-model="addFrom.rtype" placeholder="请选择类型">
						<el-option label="收入" value="收入"></el-option>
						<el-option label="支出" value="支出"></el-option>
					</el-select>
				</el-form-item>
        <el-form-item label="项目主根原因" :label-width="formLabelWidth">
          <el-select v-model="addFrom.parent"  placeholder="请选择根原因">
            <el-option label="主原因" value="-1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="display:none;" :label-width="formLabelWidth">
          <el-input type="text" v-model="addFrom.level"/>
        </el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="qx()">取 消</el-button>
				<el-button type="primary" @click="add()">确 定</el-button>
			</div>
		</el-dialog>
    <!-- 新增弹出层 -->
    <el-dialog title="添加二级原因" :visible.sync="ShowAddFormE" width="600px">
      <el-form :model="addFrom">
        <el-form-item label="项目名称" :label-width="formLabelWidth" >
          <el-input v-model="addFrom.rname" autocomplete="off" placeholder="请输入原因"></el-input>
        </el-form-item>
        <el-form-item label="项目编号" :label-width="formLabelWidth">
          <el-input v-model="addFrom.rcode" autocomplete="off" placeholder="请输入项目编号"></el-input>
        </el-form-item>

        <el-form-item label="项目类型" :label-width="formLabelWidth">
          <el-select v-model="addFrom.rtype" placeholder="请选择类型">
            <el-option label="收入" value="收入"></el-option>
            <el-option label="支出" value="支出"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级原因" :label-width="formLabelWidth">
          <el-select v-model="addFrom.parent" placeholder="请选择根原因">
            <div  v-for="itme in tableData.filter(data1 => data1.parent=='-1')" >
              <el-option  :label="itme.rname" :value="itme.rid"></el-option>
            </div>
          </el-select>
        </el-form-item>
        <el-form-item style="display:none;" label="项目主根原因" :label-width="formLabelWidth">
          <el-input type="text" v-model="addFrom.level"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="qx()">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新增子原因弹出层 -->
    <el-dialog title="添加三级原因" :visible.sync="ShowAddFormZ" width="600px">
      <el-form :model="addFrom">
        <el-form-item label="项目名称" :label-width="formLabelWidth" >
          <el-input v-model="addFrom.rname" autocomplete="off" placeholder="请输入原因"></el-input>
        </el-form-item>
        <el-form-item label="项目编号" :label-width="formLabelWidth">
          <el-input v-model="addFrom.rcode" autocomplete="off" placeholder="请输入项目编号"></el-input>
        </el-form-item>
        <el-form-item label="三级原因" :label-width="formLabelWidth" >
          <el-select v-model="addFrom.parent"  @change="rtype1(addFrom.parent)">
              <el-option v-for="data in reasonList"  v-if="data.level=='2'" :label="data.rname" :value="data.rid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="display:none;" :label-width="formLabelWidth">
          <el-input type="text" v-model="addFrom.level"/>
        </el-form-item>

        <el-form-item label="项目类型" :label-width="formLabelWidth">
          <el-select v-model="addFrom.rtype" disabled placeholder="请选择类型">
            <el-option label="收入" value="收入"></el-option>
            <el-option label="支出" value="支出"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="qx()">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改项目弹出层 -->
    <el-dialog title="修改" :visible.sync="showEdit" width="600px">
      <el-form :model="editFrom">
        <el-form-item label="项目名称" :label-width="formLabelWidth">
          <el-input v-model="editFrom.rname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目代码" :label-width="formLabelWidth">
          <el-input v-model="editFrom.rcode" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showEdit = false">取 消</el-button>
        <el-button type="primary" @click="edit()">确 定</el-button>
      </div>
    </el-dialog>
		<!-- 删除主原因 -->
		<el-dialog title="删除主原因" :visible.sync="delAddForm" width="600px">
			<el-form :model="delFrom">
        <el-form-item label="主原因" :label-width="formLabelWidth" placeholder="请选择主原因" >
          <el-select v-model="delFrom.rid">
            <el-option v-for="data in reasonList"  v-if="data.level=='1' && data.ofCompany!=0" :label="data.rname" :value="data.rid"></el-option>
          </el-select>
        </el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="delAddForm = false,delFrom={}">取 消</el-button>
				<el-button type="primary" @click="delFromS()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
  import { listRC,listReason,addReason,updateReason,delReason} from '@/api/system/reason'
  import { getInfo } from "@/api/login";
	export default {
		data() {
			return {
        delFrom:{},
        reasonList:[],
        reasonZcList:[],
				expand:[],
				formLabelWidth:'120px',
				showEdit:false,//修改弹出层
        delAddForm:false,
				ShowAddForm:false,
				ShowAddFormZ:false,
        ShowAddFormE:false,
				showSubreason:false,//显示项目子原因
				showSubreasonAdd:false,
				tableData: [],
				search: '',
				subreasonList:'',
				addFrom: {
					rname: '',
					rcode: '',
					rtype: ''
				},
				addSubFrom: {
					rname: '',
					rcode: '',
					parent:''
				},
				editFrom: {
					rname: '',
					rcode: ''
				},
				selectRowId:-1,
			}
		},
		created() {
			this.getData()
		},
		methods:{
			//弹出项目修改
			showEditPop(row){
				console.log(row);
				this.editFrom=row
				this.showEdit=true
			},
			//弹出子项目
			popSubreason(id,row){
				this.selectRowId=id
				this.subreasonList=row.subreasonList
				this.showSubreason=true
			},
			//弹出新增子原因
			addSubreasonPop(row){
				this.addSubFrom.parent=row.rid
				this.showSubreasonAdd=true
			},
			//添加子原因
			addSub(){
				let that = this
				this.$service.reason.addsub(this.addSubFrom).then(res => {
					if (res.state == 1) {
						that.getData()
						that.$notify({
							type:"success",
							title:"添加成功"
						})
					}
					that.showSubreasonAdd = false
				})
			},
			getData() {
			 getInfo().then(rep=>{
			   let r={}
			   r.ofCompany=rep.tuser.ofCompany;
			   r.ofCompanyType=0;
         listRC(r).then(date=>{
           this.reasonList=date.rows;
         })
         let that = this
         listRC(r).then(res => {
           if (res.code == 200) {
             that.tableData = res.rows;
             if(that.selectRowId!=-1){
               that.subreasonList=res.rows[that.selectRowId].subreasonList
               console.log("that.subreasonList",that.subreasonList);
             }
             // that.currency = res.data.currency
           }
         })
       })
			},
			del(aid) {
				let that = this
				this.$confirm('确认删除？')
					.then(_ => {
						delReason(aid).then(res => {
							if (res.code == 200) {
								that.getData()
								that.$notify({
									title: '删除成功',
									type: 'success'
								});
							}
						})
						done();
					})
					.catch(_ => {});
			},
			add() {
				let that = this
        let aData = new Date();
        let date=aData.getFullYear() + "-" + (aData.getMonth() + 1) + "-" + aData.getDate()+" "+aData.getHours()+":"+aData.getMinutes()+":"+aData.getSeconds();
        this.addFrom.createtime=date;
        getInfo().then(rep=>{
          this.addFrom.ofCompany=rep.tuser.ofCompany;
          addReason(this.addFrom).then(res => {
            if (res.code == 200) {
              that.getData()
              this.$notify({
                type:"success",
                title:"添加成功"
              })
            }
            that.ShowAddForm = false
            that.ShowAddFormZ = false
            that.ShowAddFormE = false
           this.addFrom={};
          })
        })
			},
			edit() {
				let that = this
				updateReason(this.editFrom).then(res => {
					if (res.code == 200) {
						that.getData()
						that.$notify({
							title: '修改成功',
							type: 'success'
						});
					}
					that.showEdit = false
				})
			},
      rtype1(row){
        for(let itme in this.reasonList){
          if(this.reasonList[itme].rid==row){
            this.addFrom.rtype=this.reasonList[itme].rtype;
          }
        }
			},qx(){
      this.ShowAddFormE = false
      this.ShowAddFormZ = false;
      this.ShowAddForm = false;
      this.addFrom={};
    },
      delFromS(){
        let that = this
        this.$confirm('确认删除？')
          .then(_ => {
            delReason(this.delFrom.rid).then(res => {
              if (res.code == 200) {
                that.getData()
                this.delAddForm=false;
                this.delFrom={};
                that.$notify({
                  title: '删除成功',
                  type: 'success'
                });
              }
            })
            done();
          })
          .catch(_ => {});
      }
		}
	}
</script>

<style lang="scss">
	.span_tit {
		display: flex;
		align-items: center;
		width: 100%;
		height: 50px;

		span {
			margin: 0 10px;
			font-weight: bold;
		}
	}
</style>
